<template>
  <div class="logo">
    <div class="logo-icon">
      <img src="../assets/logoko (2).png" alt="">
    </div>
    <div class="logo-text">{{ text }}</div>
  </div>
</template>

<script>

export default {
  name: "LogoCom",
  props: {
    text:{
      type: String,
      default: "Cat Music",
    }
  },
};
</script>

<style lang="less" scoped>
@import "../style/variable.less";
.logo {
  user-select: none;
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #fff;
  background-color: #dbd6e8;
  padding: @pad;
}
.logo-text {
  margin-left: 10px;
  font-family: logotext;
  font-size: 24px;
}
.logo-icon{
  width: 60px;
  height: 60px;
  line-height: 70px;
  img{
    width: 100%;
    height: 100%;
    background-size: cover;
  }
}
</style>